<template>
  <MyDialog title="Confirm"  :submit="confirm">
    <div class="text-body q-ma-md row">
      <div class="col-10">
        <ScanInput
          ref="scanInputDom"
          v-model="text"
          @enter="onScanInputEnter"
          initFocus
          :placeholder="'Scan or type serial number'"
        >
        </ScanInput>
      </div>
      <div class="col-2">
        <q-icon class="cursor-pointer" color="primary" name="qr_code" size="lg" @click="scanDiag = true"></q-icon>
        <q-dialog  v-model="scanDiag">
          <OpenCam @submit="(v:string)=>onSubmitCam(v)"></OpenCam>
        </q-dialog>
      </div>
    </div>
  </MyDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ScanInput from 'src/components/ScanInput.vue';
import OpenCam from 'src/components/OpenCam.vue';
import MyDialog from '../container/MyDialog.vue';
import { parsePartQR } from 'src/utils/parseQRCodeUtils';

const text = ref('');
const scanDiag = ref(false);

const emit = defineEmits(['compare']);

function confirm() {
  emit('compare', text.value);
  text.value = '';
}
//{"CAT":"6666666666","SN":"EEEEE"}
//{"CAT":"8888888888","SN":"DDDDD"}
const onScanInputEnter = (string: string) => {
  text.value = string;
  emit('compare', string);
};

async function onSubmitCam(string: string) {
  const obj = await parsePartQR(string);
  console.log(obj);

  text.value = obj.SN;
  emit('compare', text.value);
  text.value = '';
}
</script>
